<template>
  <div class='time'>
    <div class="header">
      <div class="title">
        数字起卦
      </div>
      
    </div>

    <div class="body">
      <div  class="tips" @click="showPicker=true">
        请点击<span>{{ dateStr?'切换': '选择' }}</span>未来的时间
      </div>
      <u-picker mode="time" v-model="showPicker" :params="PICKER_PARAMS" :start-year="START_YEAR" @confirm="handleConfirmTime" />
      <div  class="date-str" @click="showPicker=true">{{ dateStr }}</div>
    </div>

    <div class="btn-area">
      <u-button type="primary" shape="circle" @click="byFuture">确认起卦</u-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {LiuRen} from '@/utils/index'
import { setRes } from '@/utils/res';
import {PICKER_PARAMS, START_YEAR} from './model'


const showPicker = ref(false)

const dateStr = ref('')

let dateList = []
const handleConfirmTime = (info) => {
  const {year, month, day, hour} = info
  if (year < 2024) {
    return uni.showToast({
      title: '请重新选择时间!',
      icon: 'none'
    })
  }
  dateList= [year, month, day, hour]
  dateStr.value =`${year}年${month}月${day}日 ${hour}时`
}
const byFuture = () => {
  if (!dateList.length) {
    return uni.showToast({
      title: '请先选择时间!',
      icon: 'none'
    })
  }

  const res = LiuRen.futureDateTell(...dateList)
  if (!res) {
    return
  }
  setRes(res)
  uni.navigateTo({
    url: '/pages/res/index'
  })
}
</script>


<style lang='scss' scoped>
.time {
  padding: 40rpx;
  .header {
    padding-bottom: 80rpx;
    text-align: center;
    .title {
      padding-bottom: 40rpx;
      font-size: 48rpx;
      font-weight: 700;
    }
  }
  .body {
    text-align: center;
    .date-str {
      padding-top: 40rpx;
    }
  }
  .btn-area {
    padding-top: 80rpx;
  }
}
</style>
